<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script>
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    </script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <title>课程</title>
    <link rel="Shortcut Icon" href="images/logo.gif">
    <link rel="stylesheet" href="libs/reset.css">
    <link rel="stylesheet" href="libs/bootstrap.min.css">
    <link rel="stylesheet" href="css/article.css">
</head>

<body>
    <header>
        <div class="logo"></div>
        <div id="user">
            <div class="login">登 录</div>
            <div class="greeting">
                <span id="username">???</span>，欢迎你！
                <span class="logout">退 出</span>
            </div>
        </div>
    </header>
    <div class="container">
        <h1>二甲双胍：让你也可以活到120岁的“长生药”</h1>
        <hr>
        <p class="tips">
            温馨提示：本课程将于
            <span id="endDate">2017-01-22 24:00:00</span> 结束,逾期将不记录学习，请即时完成！
        </p>
        <p class="article">文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述</p>
        <div class="tab">
            <div class="item active">课程内容</div>
            <div class="item">查看完成情况</div>
        </div>
        <!-- 内容 -->
        <div class="block">
            <!-- video -->
            <div>
                <video width="100%" height="auto" preload="metadata" controls>
                    <source src="video/movie.mp4" type="video/mp4">
                    <!-- <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持观看此视频。 -->
                </video>
                <a class="download" download="(xxx).mp4" href="video/movie.mp4">下载此视频</a>
            </div>
            <!-- pdf -->
            <div>
                <a id="preview" href="preview/viewer.html">
                    <span>点击预览课件</span>
                </a>
                <a class="download" download="(xxx).pdf" href="preview/sources/pdfTest.pdf">下载此pdf文件</a>
            </div>
            <div class="complete">
                <span>点击确认后即完成</span>
                <div class="btn btn-danger btn-block btn-lg">已完成观看，请点此确认</div>
                <i></i>
            </div>
        </div>
        <table class="block table table-striped table-bordered">
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>完成日期</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>用户名</td>
                    <td>2017-01-20</td>
                    <td class="false">未完成</td>
                </tr>
                <tr>
                    <td>用户名</td>
                    <td>2017-01-20</td>
                    <td class="false">未完成</td>
                </tr>
                <tr>
                    <td>用户名</td>
                    <td>2017-01-20</td>
                    <td class="false">未完成</td>
                </tr>
                <tr>
                    <td>用户名</td>
                    <td>2017-01-20</td>
                    <td>已完成</td>
                </tr>
                <tr>
                    <td>用户名</td>
                    <td>2017-01-20</td>
                    <td>已完成</td>
                </tr>
            </tbody>
        </table>
        <!--课后练习-->
        <div id="questions">
            <h3>课后练习</h3>
            <div>
                <h4><span>1、</span>请问：1+1=？</h4>
                <div class="radio">
                    <label>
                        <input type="radio" name="q1"><span>A) </span>选项1选项1</label>
                    <label>
                        <input type="radio" name="q1"><span>B) </span>选项2选项2选项2选项2选项2</label>
                    <label>
                        <input type="radio" name="q1"><span>C) </span>选项3选项3选项3选项3</label>
                    <label>
                        <input type="radio" name="q1"><span>D) </span>选项4选项4选项4</label>
                </div>
            </div>
            <div>
                <h4><span>5、</span>请问：1+1=？</h4>
                <div class="radio">
                    <label>
                        <input type="radio" name="q2"><span>A) </span>选项1选项1</label>
                    <label>
                        <input type="radio" name="q2"><span>B) </span>选项2选项2选项2选项2选项2</label>
                    <label>
                        <input type="radio" name="q2"><span>C) </span>选项3选项3选项3选项3</label>
                    <label>
                        <input type="radio" name="q2"><span>D) </span>选项4选项4选项4</label>
                </div>
            </div>
            <!--提交按钮-->
            <div class="answerBtn">
                <span class="caution">*题目有遗漏，请检查再提交~</span>
                <div class="btn btn-danger btn-block btn-lg">提 交 答 案</div>
                <i></i>
            </div>
        </div>
    </div>
    <!-- 个人中心 -->
    <div class="user-center"></div>
    <!-- 弹窗 -->
    <div id="manage">
        <div class="container">
            <h4>个人中心</h4>
            <h5>- 修改密码 -</h5>
            <hr>
            <div class="form-inline">
                <div class="form-group">
                    <label>旧密码：</label>
                    <input type="password" class="form-control" name="" placeholder="旧密码">
                </div>
                <div class="form-group">
                    <label>新密码：</label><span>(必须不少于6位)</span>
                    <input type="password" class="form-control" name="" placeholder="新密码">
                </div>
                <div class="form-group">
                    <label>再输入一次新密码：</label>
                    <input type="password" class="form-control" name="" placeholder="重复新密码">
                </div>
            </div>
            <div class="pull-right">
                <div class="btn btn-primary">确认修改</div>
                <div class="btn btn-default">取消</div>
            </div>
        </div>
    </div>
    <script src="libs/zepto.min.js"></script>
    <script src="libs/fastclick.js"></script>
    <script>
    $(function() {
        // fastclick
        FastClick.attach(document.body);

        // 登陆弹窗
        $('.login').on('click', function() {
            $(this).hide();
            $('.greeting').show();
        });

        // 退出
        $('.logout').on('click', function() {
            $('.greeting').hide();
            $('.login').show();
        });

        // 切换
        $('.item').on('click', function() {
            var index = $(this).index();
            var blocks = $('.block');

            $('.item').removeClass('active');
            $(this).addClass('active');

            // 内容切换
            blocks.hide();
            if (index === 1) {
                /* 未登录弹窗 */

                /* 已登录且成功*/
                $('table').css('display', 'table');
            } else {
                blocks.eq(0).show();
            }
        });

        // 已完成
        (function() {
            var isFinish = false;
            $('.complete .btn-danger').on('click', function() {
                if (isFinish) return;
                // ajax成功
                $(this).removeClass('btn-danger').addClass('btn-default active').text('已完成该课程');
                $('.complete i').show();
                isFinish = true;

                // ajax失败
                // ...
            })
        })();

        //   提交答案(function() {
        (function() {
            var isFinish = false;
            var L = $('.radio').length;
            $('#questions .btn-danger').on('click', function() {
                //                未打完返回
                var len = $('input:checked').length;

                if (isFinish) return;
                if (len < L) {
                    $('.caution').show();
                    return
                };
                // ajax成功
                $(this).removeClass('btn-danger').addClass('btn-default active').text('已 交 卷');
                $('.answerBtn i').show();
                isFinish = true;

                //   提交后不再提供选择
                $('[type="radio"]').prop('disabled', true);
                $('.caution').hide();

                // ajax失败
                // ...
            })
        })();

        // 修改密码
        (function() {
            var oManage = $('#manage');
            var $inputs = oManage.find('input');
            var oldPassword = $inputs.eq(0);
            var newPassword = $inputs.eq(1);
            var newPasswordRepeat = $inputs.eq(2);
            var minLen = 6;//密码最少是6位数

            $('.user-center').on('click', function() {
                oManage.toggle();
                $inputs.val('');//清空值
            });

            // 取消按钮
            oManage.add('.btn-default').on('click',function(){
                oManage.hide();
                $inputs.val('');//清空值
            });

            // 去空格
            $inputs.on('keyup',function(){
                oldPassword.val(oldPassword.val().trim());
                newPassword.val(newPassword.val().trim());
                newPasswordRepeat.val(newPasswordRepeat.val().trim());
            })

            // 确认按钮
            oManage.find('.btn-primary').on('click',function(){
                var oldPasswordValue = oldPassword.val();
                var newPasswordValue = newPassword.val();
                var newPasswordRepeatValue = newPasswordRepeat.val();

                if (newPasswordValue.length<minLen || oldPasswordValue.length < minLen) {//新旧密码长度小于6
                    alert("请检查密码长度是否满足要求！");
                    return
                }else{
                    if (newPasswordValue === newPasswordRepeatValue) {//重复密码错误时

                        alert("成功！新密码是："+newPasswordRepeatValue)//可以提交修改了！！

                    }else{
                        alert("密码不一致！");
                        return
                    }
                };
            });

            //阻止冒泡
            oManage.find('.container').on('click',function(e){
                e.stopPropagation();
            });
            //阻止默认
            oManage.on('touchmove', function(e) {
                e.preventDefault();
            });
        })();

    })
    </script>
</body>

</html>
